<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>植物大战僵尸 - 键盘学习游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4CAF50',      // 植物绿
                        secondary: '#F44336',    // 僵尸红
                        sun: '#FFC107',          // 阳光黄
                        pea: '#8BC34A',          // 豌豆绿
                        soil: '#8D6E63',         // 土壤棕
                        grass: '#795548',        // 草地绿
                        glass: 'rgba(255, 255, 255, 0.15)', // 玻璃态背景
                    },
                    fontFamily: {
                        game: ['"Comic Sans MS"', '"Marker Felt"', 'sans-serif']
                    },
                    animation: {
                        'bounce-slow': 'bounce 3s infinite',
                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'float': 'float 6s ease-in-out infinite',
                        'wiggle': 'wiggle 1s ease-in-out infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' }
                        },
                        wiggle: {
                            '0%, 100%': { transform: 'rotate(-3deg)' },
                            '50%': { transform: 'rotate(3deg)' }
                        }
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .glass-effect {
                background: rgba(255, 255, 255, 0.15);
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.2);
            }
            .glass-dark {
                background: rgba(30, 30, 30, 0.6);
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.1);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            }
            .keyboard-key {
                @apply w-10 h-10 md:w-12 md:h-12 rounded-md bg-gray-800 flex items-center justify-center text-white font-bold text-lg border-2 border-gray-600 shadow-md transition-all duration-200;
            }
            .keyboard-key-active {
                @apply bg-primary border-primary scale-110 shadow-lg;
            }
            .btn-primary {
                @apply bg-primary hover:bg-primary/80 text-white font-bold py-3 px-6 rounded-full transition-all duration-300 hover:scale-105 active:scale-95 shadow-lg;
            }
            .btn-secondary {
                @apply glass-effect text-white font-bold py-3 px-6 rounded-full transition-all duration-300 hover:bg-white/20 active:scale-95;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-b from-green-50 to-green-100 font-game min-h-screen overflow-hidden">
    <!-- 背景装饰 -->
    <div class="fixed inset-0 z-0 opacity-20">
        <div class="absolute top-10 left-10 w-32 h-32 bg-sun rounded-full blur-3xl"></div>
        <div class="absolute bottom-20 right-10 w-40 h-40 bg-primary rounded-full blur-3xl"></div>
    </div>

    <!-- 草地背景 -->
    <div class="fixed bottom-0 left-0 right-0 h-1/3 bg-gradient-to-t from-soil to-grass z-0"></div>

    <!-- 游戏容器 -->
    <div class="relative w-full h-screen flex flex-col lg:flex-row z-10">
        <!-- 游戏画布容器 -->
        <div class="relative flex-1 overflow-hidden">
            <canvas id="gameCanvas" class="absolute inset-0 w-full h-full"></canvas>
            
            <!-- 游戏UI元素 -->
            <div id="gameUI" class="absolute top-0 left-0 w-full p-4 flex justify-between items-start pointer-events-none z-10">
                <div class="glass-effect rounded-lg p-3 flex flex-col gap-2">
                    <div class="flex items-center gap-2">
                        <i class="fa fa-heart text-secondary text-xl"></i>
                        <span id="lives" class="text-xl font-bold">3</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <i class="fa fa-star text-sun text-xl"></i>
                        <span id="score" class="text-xl font-bold">0</span>
                    </div>
                </div>
                <div class="glass-effect rounded-lg p-3 flex flex-col gap-2 items-end">
                    <div class="flex items-center gap-2">
                        <span id="level" class="text-xl font-bold">1</span>
                        <i class="fa fa-signal text-primary text-xl"></i>
                    </div>
                    <div id="powerupIndicator" class="hidden flex items-center gap-2">
                        <i class="fa fa-bolt text-yellow-500 text-xl"></i>
                        <span id="powerupTimer">5s</span>
                    </div>
                </div>
            </div>
            
            <!-- 键盘提示区 - 只在游戏中显示 -->
            <div id="keyboardHUD" class="absolute bottom-20 left-1/2 transform -translate-x-1/2 glass-effect rounded-xl p-4 hidden z-10">
                <p class="text-center mb-3 font-bold">按这些键发射豌豆:</p>
                <div id="keyboardKeys" class="flex gap-2 justify-center flex-wrap max-w-md">
                    <!-- 键盘按键将动态生成 -->
                </div>
            </div>
            
            <!-- 开始界面 -->
            <div id="startScreen" class="absolute inset-0 z-20 flex flex-col items-center justify-center p-4">
                <div class="glass-effect rounded-2xl p-8 max-w-md w-full text-center transform transition-all duration-500 animate-float">
                    <div class="flex justify-center mb-4">
                        <img src="https://picsum.photos/seed/peashooter/100/100" alt="豌豆射手" class="w-24 h-24 object-contain">
                        <img src="https://picsum.photos/seed/zombie/100/100" alt="僵尸" class="w-24 h-24 object-contain -ml-6">
                    </div>
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-4 text-primary text-shadow">植物大战僵尸</h1>
                    <h2 class="text-xl text-gray-700 mb-6">键盘学习版</h2>
                    <p class="text-gray-700 mb-8">按下正确的字母键，帮助豌豆射手击退僵尸，学习键盘位置！</p>
                    
                    <div class="flex flex-col gap-4 mb-8">
                        <button id="startBtn" class="btn-primary">
                            <i class="fa fa-play mr-2"></i>开始游戏
                        </button>
                        <button id="howToPlayBtn" class="btn-secondary text-gray-800">
                            <i class="fa fa-info-circle mr-2"></i>游戏说明
                        </button>
                    </div>
                    
                    <div class="text-sm text-gray-600">
                        <p>适合三年级小朋友的键盘练习游戏</p>
                    </div>
                </div>
            </div>
            
            <!-- 暂停界面 -->
            <div id="pauseScreen" class="absolute inset-0 z-20 hidden items-center justify-center p-4">
                <div class="glass-effect rounded-2xl p-8 max-w-md w-full text-center">
                    <h2 class="text-3xl font-bold mb-6 text-primary text-shadow">游戏暂停</h2>
                    
                    <div class="flex flex-col gap-4 mb-6">
                        <button id="resumeBtn" class="btn-primary">
                            <i class="fa fa-play mr-2"></i>继续游戏
                        </button>
                        <button id="restartBtn" class="btn-secondary text-gray-800">
                            <i class="fa fa-refresh mr-2"></i>重新开始
                        </button>
                        <button id="quitBtn" class="btn-secondary text-gray-800">
                            <i class="fa fa-sign-out mr-2"></i>退出游戏
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 游戏结束界面 -->
            <div id="gameOverScreen" class="absolute inset-0 z-20 hidden items-center justify-center p-4">
                <div class="glass-effect rounded-2xl p-8 max-w-md w-full">
                    <h2 class="text-3xl font-bold mb-2 text-secondary text-shadow text-center">游戏结束</h2>
                    <p class="text-center text-gray-700 mb-6">僵尸入侵成功了！</p>
                    
                    <div class="space-y-4 mb-6">
                        <div class="flex justify-between items-center p-3 glass-dark rounded-lg">
                            <span>最终得分</span>
                            <span id="finalScore" class="text-xl font-bold text-primary">0</span>
                        </div>
                        <div class="flex justify-between items-center p-3 glass-dark rounded-lg">
                            <span>达到关卡</span>
                            <span id="finalLevel" class="text-xl font-bold text-primary">1</span>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold mb-2">学习成果</h3>
                            <div id="learnedKeys" class="flex flex-wrap gap-2">
                                <!-- 学习的按键将在这里动态添加 -->
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex flex-col gap-4">
                        <button id="playAgainBtn" class="btn-primary">
                            <i class="fa fa-refresh mr-2"></i>再玩一次
                        </button>
                        <button id="backToMainBtn" class="btn-secondary text-gray-800">
                            <i class="fa fa-home mr-2"></i>返回主页
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 关卡升级提示 -->
            <div id="levelUpScreen" class="absolute inset-0 z-20 hidden items-center justify-center p-4">
                <div class="text-center transform transition-all duration-1000 scale-110">
                    <h2 class="text-[clamp(2rem,8vw,5rem)] font-extrabold text-primary text-shadow">
                        关卡 <span id="newLevel">2</span>
                    </h2>
                    <p class="text-xl mt-4 text-gray-700">太棒了！新的挑战来了</p>
                </div>
            </div>
            
            <!-- 新按键学习提示 -->
            <div id="newKeyNotification" class="absolute top-4 right-4 glass-effect rounded-lg p-4 max-w-xs w-full transform translate-x-full transition-transform duration-500 z-30 hidden">
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
                        <i class="fa fa-key text-primary text-xl"></i>
                    </div>
                    <div>
                        <h3 id="newKeyTitle" class="font-bold text-primary">新按键！</h3>
                        <p id="newKeyDescription" class="text-gray-700 text-sm">学习使用 <span class="keyboard-key inline-flex">A</span> 键</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 侧边栏 - 大屏幕显示 -->
        <div id="sidebar" class="hidden lg:block w-80 glass-dark p-6 overflow-y-auto">
            <div class="mb-8">
                <h2 class="text-xl font-bold mb-4 text-primary text-shadow">游戏说明</h2>
                <p class="text-gray-300 mb-4">当僵尸出现时，按对应的字母键发射豌豆攻击它们！</p>
                <p class="text-gray-300 mb-4">每击退一个僵尸，你将获得分数。如果僵尸到达左侧，你将失去一条生命。</p>
            </div>
            
            <div class="mb-8">
                <h2 class="text-xl font-bold mb-4 text-primary text-shadow">僵尸类型</h2>
                <div class="space-y-4">
                    <div class="flex items-center gap-3 p-3 rounded-lg hover:bg-white/10 transition-all">
                        <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center">
                            <i class="fa fa-walking text-gray-300"></i>
                        </div>
                        <div>
                            <p class="font-medium">普通僵尸</p>
                            <p class="text-sm text-gray-400">速度中等，10分</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-3 p-3 rounded-lg hover:bg-white/10 transition-all">
                        <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center">
                            <i class="fa fa-bolt text-yellow-400"></i>
                        </div>
                        <div>
                            <p class="font-medium">快速僵尸</p>
                            <p class="text-sm text-gray-400">速度快，5分</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-3 p-3 rounded-lg hover:bg-white/10 transition-all">
                        <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center">
                            <i class="fa fa-shield text-gray-300"></i>
                        </div>
                        <div>
                            <p class="font-medium">重型僵尸</p>
                            <p class="text-sm text-gray-400">速度慢，耐打，20分</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div>
                <h2 class="text-xl font-bold mb-4 text-primary text-shadow">已学习按键</h2>
                <div id="learnedKeysSidebar" class="flex flex-wrap gap-2 mb-4">
                    <!-- 学习的按键将在这里动态添加 -->
                </div>
                <p class="text-sm text-gray-400">随着关卡提升，你将学习更多按键！</p>
            </div>
        </div>
        
        <!-- 移动端控制按钮 -->
        <div id="mobileControls" class="lg:hidden absolute bottom-4 left-0 right-0 flex justify-center z-10 pointer-events-auto">
            <button id="mobilePauseBtn" class="w-12 h-12 rounded-full glass-effect flex items-center justify-center mr-2">
                <i class="fa fa-pause text-gray-800"></i>
            </button>
            <div id="mobileKeyGrid" class="grid grid-cols-3 gap-2">
                <!-- 移动按键将动态生成 -->
            </div>
        </div>
    </div>

    <script>
        // 游戏主类
        class PlantsVsZombies {
            constructor() {
                console.log('游戏初始化');
                // 获取画布和上下文
                this.canvas = document.getElementById('gameCanvas');
                this.ctx = this.canvas.getContext('2d');
                         // 玩家/豌豆射手属性
                this.peashooter = {
                    x: 50,
                    y: this.canvas.height - 100,
                    width: 60,
                    height: 70,
                    color: '#8BC34A',
                    shootTimer: 0
                };
                console.log('玩家/豌豆射手属性', this.peashooter);
                // 设置画布尺寸
                this.resizeCanvas();
                window.addEventListener('resize', () => this.resizeCanvas());
                
                // 游戏状态
                this.gameState = 'start'; // start, playing, paused, gameOver, levelUp
                this.score = 0;
                this.lives = 3;
                this.level = 1;
                this.zombiesKilled = 0;
                
                // 键盘学习相关
                this.availableKeys = []; // 当前可使用的按键
                this.learnedKeys = [];   // 已经学习的按键
                this.keyboardLayout = [
                    ['A', 'S', 'D', 'F', 'G'],
                    ['H', 'J', 'K', 'L', ';'],
                    ['Q', 'W', 'E', 'R', 'T'],
                    ['Y', 'U', 'I', 'O', 'P']
                ];
                
       
                // 游戏元素数组
                this.peas = [];
                this.zombies = [];
                this.sunflowers = [];
                this.powerups = [];
                this.explosions = [];
                this.soilPatches = [];
                
                // 游戏设置
                this.peaSpeed = 6;
                this.zombieSpawnRate = 120; // 每120帧生成一个僵尸
                this.currentSpawnTimer = 0;
                
                // 控制状态
                this.keys = {}; // 存储按键状态
                this.mobileKey = null; // 移动设备按下的键
                
                // 绑定事件监听
                this.bindEvents();
                
                // 初始化游戏元素
                this.initGameElements();
                
                // 游戏循环
                this.lastTime = 0;
                requestAnimationFrame((timestamp) => this.gameLoop(timestamp));
            }
            
            // 调整画布尺寸
            resizeCanvas() {
                const container = this.canvas.parentElement;
                this.canvas.width = container.clientWidth;
                this.canvas.height = container.clientHeight;
                console.log(this.peashooter );
                // 重新定位豌豆射手
                this.peashooter.y = this.canvas.height - 100;
                
                // 重新初始化游戏元素
                this.initGameElements();
            }
            
            // 初始化游戏元素
            initGameElements() {
                // 创建土壤块
                this.soilPatches = [];
                const patchCount = 5;
                const patchWidth = this.canvas.width / patchCount;
                
                for (let i = 0; i < patchCount; i++) {
                    this.soilPatches.push({
                        x: i * patchWidth,
                        y: this.canvas.height - 80,
                        width: patchWidth,
                        height: 80
                    });
                }
                
                // 创建向日葵
                this.sunflowers = [];
                for (let i = 0; i < 3; i++) {
                    const randomX = Math.random() * (this.canvas.width - 100) + 50;
                    const randomY = Math.random() * (this.canvas.height / 2) + 50;
                    
                    this.sunflowers.push({
                        x: randomX,
                        y: randomY,
                        width: 40,
                        height: 50,
                        color: '#FFC107',
                        pulseTimer: 0,
                        pulseSize: 1
                    });
                }
            }
            
            // 绑定事件
            bindEvents() {
                // 键盘控制
                window.addEventListener('keydown', (e) => {
                    const key = e.key.toUpperCase();
                    if (this.availableKeys.includes(key)) {
                        this.keys[key] = true;
                        
                        // 在游戏中才发射豌豆
                        if (this.gameState === 'playing') {
                            this.shootPea(key);
                        }
                    }
                    
                    // 暂停游戏
                    if (e.key === 'Escape' || e.key === 'p' || e.key === 'P') {
                        if (this.gameState === 'playing') {
                            this.pauseGame();
                        } else if (this.gameState === 'paused') {
                            this.resumeGame();
                        }
                    }
                });
                
                window.addEventListener('keyup', (e) => {
                    const key = e.key.toUpperCase();
                    this.keys[key] = false;
                });
                
                // 按钮控制
                document.getElementById('startBtn').addEventListener('click', () => this.startGame());
                document.getElementById('howToPlayBtn').addEventListener('click', () => {
                    document.getElementById('startScreen').classList.add('hidden');
                    document.getElementById('sidebar').classList.remove('hidden');
                    document.getElementById('sidebar').insertAdjacentHTML('beforeend', `
                        <button id="backBtn" class="btn-primary mt-6 w-full">
                            <i class="fa fa-arrow-left mr-2"></i>返回
                        </button>
                    `);
                    document.getElementById('backBtn').addEventListener('click', () => {
                        document.getElementById('startScreen').classList.remove('hidden');
                        document.getElementById('sidebar').classList.add('hidden');
                        document.getElementById('backBtn').remove();
                    });
                });
                document.getElementById('resumeBtn').addEventListener('click', () => this.resumeGame());
                document.getElementById('restartBtn').addEventListener('click', () => this.restartGame());
                document.getElementById('quitBtn').addEventListener('click', () => this.quitGame());
                document.getElementById('playAgainBtn').addEventListener('click', () => this.restartGame());
                document.getElementById('backToMainBtn').addEventListener('click', () => this.quitGame());
                document.getElementById('mobilePauseBtn').addEventListener('click', () => {
                    if (this.gameState === 'playing') {
                        this.pauseGame();
                    }
                });
            }
            
            // 开始游戏
            startGame() {
                this.gameState = 'playing';
                document.getElementById('startScreen').classList.add('hidden');
                document.getElementById('sidebar').classList.remove('hidden');
                document.getElementById('keyboardHUD').classList.remove('hidden');
                
                // 重置游戏状态
                this.resetGame();
                
                // 初始化第一关的可用按键
                this.unlockNewKeys(3); // 第一关解锁3个按键
            }
            
            // 重置游戏
            resetGame() {
                this.score = 0;
                this.lives = 3;
                this.level = 1;
                this.zombiesKilled = 0;
                this.availableKeys = [];
                this.learnedKeys = [];
                this.keys = {};
                
                // 清空数组
                this.peas = [];
                this.zombies = [];
                this.powerups = [];
                this.explosions = [];
                
                // 更新UI
                document.getElementById('score').textContent = this.score;
                document.getElementById('lives').textContent = this.lives;
                document.getElementById('level').textContent = this.level;
                document.getElementById('powerupIndicator').classList.add('hidden');
                document.getElementById('learnedKeys').innerHTML = '';
                document.getElementById('learnedKeysSidebar').innerHTML = '';
                
                // 清空键盘显示
                document.getElementById('keyboardKeys').innerHTML = '';
                document.getElementById('mobileKeyGrid').innerHTML = '';
            }
            
            // 解锁新按键
            unlockNewKeys(count) {
                // 从键盘布局中随机选择未解锁的按键
                const allKeys = [].concat(...this.keyboardLayout);
                const unusedKeys = allKeys.filter(key => !this.learnedKeys.includes(key));
                
                // 随机选择指定数量的新按键
                for (let i = 0; i < count && unusedKeys.length > 0; i++) {
                    const randomIndex = Math.floor(Math.random() * unusedKeys.length);
                    const newKey = unusedKeys.splice(randomIndex, 1)[0];
                    
                    this.availableKeys.push(newKey);
                    this.learnedKeys.push(newKey);
                    
                    // 显示新按键通知
                    this.showNewKeyNotification(newKey);
                }
                
                // 更新键盘显示
                this.updateKeyboardDisplay();
            }
            
            // 显示新按键通知
            showNewKeyNotification(key) {
                const notification = document.getElementById('newKeyNotification');
                document.getElementById('newKeyDescription').innerHTML = `学习使用 <span class="keyboard-key inline-flex">${key}</span> 键`;
                
                notification.classList.remove('hidden');
                notification.style.transform = 'translateX(0)';
                
                // 3秒后隐藏通知
                setTimeout(() => {
                    notification.style.transform = 'translateX(calc(100% + 1rem))';
                }, 3000);
                
                // 更新侧边栏的已学习按键
                this.updateLearnedKeysDisplay();
            }
            
            // 更新已学习按键显示
            updateLearnedKeysDisplay() {
                const sidebarContainer = document.getElementById('learnedKeysSidebar');
                const gameOverContainer = document.getElementById('learnedKeys');
                
                // 清空容器
                sidebarContainer.innerHTML = '';
                gameOverContainer.innerHTML = '';
                
                // 添加按键
                this.learnedKeys.forEach(key => {
                    const keyElement = document.createElement('div');
                    keyElement.className = 'keyboard-key';
                    keyElement.textContent = key;
                    sidebarContainer.appendChild(keyElement.cloneNode(true));
                    gameOverContainer.appendChild(keyElement);
                });
            }
            
            // 更新键盘显示
            updateKeyboardDisplay() {
                const keyboardContainer = document.getElementById('keyboardKeys');
                const mobileContainer = document.getElementById('mobileKeyGrid');
                
                // 清空容器
                keyboardContainer.innerHTML = '';
                mobileContainer.innerHTML = '';
                
                // 添加可用按键
                this.availableKeys.forEach(key => {
                    // 桌面端键盘
                    const keyElement = document.createElement('div');
                    keyElement.className = 'keyboard-key';
                    keyElement.textContent = key;
                    keyElement.id = `key-${key}`;
                    keyboardContainer.appendChild(keyElement);
                    
                    // 移动端按键
                    const mobileKey = document.createElement('button');
                    mobileKey.className = 'keyboard-key';
                    mobileKey.textContent = key;
                    mobileKey.addEventListener('touchstart', () => {
                        this.mobileKey = key;
                        this.keys[key] = true;
                        if (this.gameState === 'playing') {
                            this.shootPea(key);
                        }
                    });
                    mobileKey.addEventListener('touchend', () => {
                        this.mobileKey = null;
                        this.keys[key] = false;
                    });
                    mobileContainer.appendChild(mobileKey);
                });
            }
            
            // 暂停游戏
            pauseGame() {
                if (this.gameState === 'playing') {
                    this.gameState = 'paused';
                    document.getElementById('pauseScreen').classList.remove('hidden');
                    document.getElementById('pauseScreen').classList.add('flex');
                }
            }
            
            // 恢复游戏
            resumeGame() {
                if (this.gameState === 'paused') {
                    this.gameState = 'playing';
                    document.getElementById('pauseScreen').classList.add('hidden');
                    document.getElementById('pauseScreen').classList.remove('flex');
                }
            }
            
            // 重新开始游戏
            restartGame() {
                document.getElementById('pauseScreen').classList.add('hidden');
                document.getElementById('pauseScreen').classList.remove('flex');
                document.getElementById('gameOverScreen').classList.add('hidden');
                document.getElementById('gameOverScreen').classList.remove('flex');
                
                this.startGame();
            }
            
            // 退出游戏
            quitGame() {
                this.gameState = 'start';
                document.getElementById('pauseScreen').classList.add('hidden');
                document.getElementById('pauseScreen').classList.remove('flex');
                document.getElementById('gameOverScreen').classList.add('hidden');
                document.getElementById('gameOverScreen').classList.remove('flex');
                document.getElementById('startScreen').classList.remove('hidden');
                document.getElementById('sidebar').classList.add('hidden');
                document.getElementById('keyboardHUD').classList.add('hidden');
            }
            
            // 升级关卡
            levelUp() {
                this.level++;
                document.getElementById('level').textContent = this.level;
                document.getElementById('newLevel').textContent = this.level;
                
                // 显示关卡升级画面
                this.gameState = 'levelUp';
                document.getElementById('levelUpScreen').classList.remove('hidden');
                document.getElementById('levelUpScreen').classList.add('flex');
                
                // 清除当前屏幕上的僵尸
                this.zombies = [];
                
                // 2秒后继续游戏
                setTimeout(() => {
                    document.getElementById('levelUpScreen').classList.add('hidden');
                    document.getElementById('levelUpScreen').classList.remove('flex');
                    this.gameState = 'playing';
                    
                    // 每升3级解锁新按键
                    if (this.level % 3 === 0) {
                        this.unlockNewKeys(2);
                    }
                    
                    // 调整游戏难度
                    this.zombieSpawnRate = Math.max(60, 120 - (this.level - 1) * 8); // 最小60帧
                }, 2000);
            }
            
            // 游戏结束
            gameOver() {
                this.gameState = 'gameOver';
                document.getElementById('finalScore').textContent = this.score;
                document.getElementById('finalLevel').textContent = this.level;
                
                // 更新学习的按键
                this.updateLearnedKeysDisplay();
                
                document.getElementById('gameOverScreen').classList.remove('hidden');
                document.getElementById('gameOverScreen').classList.add('flex');
                document.getElementById('keyboardHUD').classList.add('hidden');
            }
            
            // 发射豌豆
            shootPea(key) {
                // 防止快速连续发射
                if (this.peashooter.shootTimer > 0) return;
                this.peashooter.shootTimer = 15; // 15帧冷却
                
                // 为不同的键分配不同的Y位置，形成多条弹道
                const keyIndex = this.availableKeys.indexOf(key);
                const laneSpacing = 40; // 弹道间距
                const baseY = this.peashooter.y + this.peashooter.height / 3;
                const peaY = baseY + (keyIndex % 3) * laneSpacing - laneSpacing;
                
                // 创建豌豆
                this.peas.push({
                    x: this.peashooter.x + this.peashooter.width,
                    y: peaY,
                    width: 10,
                    height: 10,
                    color: '#8BC34A',
                    key: key, // 记录发射该豌豆的按键
                    trail: [] // 轨迹效果
                });
                
                // 按键动画效果
                const keyElement = document.getElementById(`key-${key}`);
                if (keyElement) {
                    keyElement.classList.add('keyboard-key-active');
                    setTimeout(() => {
                        keyElement.classList.remove('keyboard-key-active');
                    }, 200);
                }
            }
            
            // 更新豌豆
            updatePeas() {
                // 更新冷却时间
                if (this.peashooter.shootTimer > 0) {
                    this.peashooter.shootTimer--;
                }
                
                for (let i = this.peas.length - 1; i >= 0; i--) {
                    const pea = this.peas[i];
                    
                    // 移动豌豆
                    pea.x += this.peaSpeed;
                    
                    // 记录轨迹
                    pea.trail.unshift({x: pea.x, y: pea.y});
                    if (pea.trail.length > 5) {
                        pea.trail.pop();
                    }
                    
                    // 移除超出屏幕的豌豆
                    if (pea.x > this.canvas.width) {
                        this.peas.splice(i, 1);
                    }
                }
            }
            
            // 生成僵尸
            spawnZombie() {
                this.currentSpawnTimer++;
                if (this.currentSpawnTimer >= this.zombieSpawnRate) {
                    this.currentSpawnTimer = 0;
                    
                    // 随机僵尸类型
                    const zombieType = Math.random();
                    let zombie;
                    
                    // 随机选择一个弹道
                    const randomKeyIndex = Math.floor(Math.random() * this.availableKeys.length);
                    const key = this.availableKeys[randomKeyIndex];
                    
                    // 计算僵尸Y位置（与对应按键的弹道匹配）
                    const laneSpacing = 40;
                    const baseY = this.peashooter.y + this.peashooter.height / 3;
                    const zombieY = baseY + (randomKeyIndex % 3) * laneSpacing - laneSpacing;
                    
                    if (zombieType < 0.6) {
                        // 普通僵尸
                        zombie = {
                            type: 'normal',
                            x: this.canvas.width,
                            y: zombieY,
                            width: 50,
                            height: 60,
                            speed: 1 + (this.level - 1) * 0.1,
                            health: 1,
                            color: '#F44336',
                            points: 10,
                            key: key, // 消灭此僵尸需要的按键
                            walkCycle: 0 // 行走动画周期
                        };
                    } else if (zombieType < 0.9) {
                        // 快速僵尸
                        zombie = {
                            type: 'fast',
                            x: this.canvas.width,
                            y: zombieY,
                            width: 40,
                            height: 50,
                            speed: 1.8 + (this.level - 1) * 0.15,
                            health: 1,
                            color: '#FF9800',
                            points: 5,
                            key: key,
                            walkCycle: 0
                        };
                    } else {
                        // 重型僵尸
                        zombie = {
                            type: 'heavy',
                            x: this.canvas.width,
                            y: zombieY - 10,
                            width: 60,
                            height: 70,
                            speed: 0.7 + (this.level - 1) * 0.08,
                            health: 3,
                            color: '#9C27B0',
                            points: 20,
                            key: key,
                            walkCycle: 0
                        };
                    }
                    
                    this.zombies.push(zombie);
                }
            }
            
            // 更新僵尸
            updateZombies() {
                for (let i = this.zombies.length - 1; i >= 0; i--) {
                    const zombie = this.zombies[i];
                    
                    // 移动僵尸
                    zombie.x -= zombie.speed;
                    
                    // 更新行走动画
                    zombie.walkCycle = (zombie.walkCycle + 0.1) % (Math.PI * 2);
                    
                    // 僵尸到达左侧
                    if (zombie.x + zombie.width < 0) {
                        this.zombies.splice(i, 1);
                        this.lives--;
                        document.getElementById('lives').textContent = this.lives;
                        
                        // 游戏结束
                        if (this.lives <= 0) {
                            this.gameOver();
                            return;
                        }
                    }
                }
            }
            
            // 更新向日葵
            updateSunflowers() {
                for (const sunflower of this.sunflowers) {
                    // 向日葵脉动动画
                    sunflower.pulseTimer += 0.05;
                    sunflower.pulseSize = 1 + Math.sin(sunflower.pulseTimer) * 0.1;
                }
            }
            
            // 检查碰撞
            checkCollisions() {
                // 豌豆与僵尸碰撞
                for (let i = this.peas.length - 1; i >= 0; i--) {
                    const pea = this.peas[i];
                    
                    for (let j = this.zombies.length - 1; j >= 0; j--) {
                        const zombie = this.zombies[j];
                        
                        // 只有对应按键的豌豆才能击中僵尸
                        if (pea.key === zombie.key && this.isColliding(pea, zombie)) {
                            // 移除豌豆
                            this.peas.splice(i, 1);
                            
                            // 减少僵尸生命值
                            zombie.health--;
                            
                            // 僵尸被摧毁
                            if (zombie.health <= 0) {
                                this.zombies.splice(j, 1);
                                this.score += zombie.points;
                                document.getElementById('score').textContent = this.score;
                                
                                this.zombiesKilled++;
                                
                                // 创建爆炸效果
                                this.createExplosion(zombie.x + zombie.width / 2, zombie.y + zombie.height / 2, zombie.width);
                                
                                // 检查关卡升级（每10个僵尸）
                                if (this.zombiesKilled % 10 === 0) {
                                    this.levelUp();
                                }
                                
                                break; // 一颗豌豆只能击中一个僵尸
                            }
                            
                            break; // 子弹已击中目标
                        }
                    }
                }
            }
            
            // 碰撞检测
            isColliding(a, b) {
                return a.x < b.x + b.width &&
                       a.x + a.width > b.x &&
                       a.y < b.y + b.height &&
                       a.y + a.height > b.y;
            }
            
            // 创建爆炸效果
            createExplosion(x, y, size) {
                const particles = [];
                const particleCount = Math.floor(size / 2);
                
                for (let i = 0; i < particleCount; i++) {
                    const angle = Math.random() * Math.PI * 2;
                    const speed = Math.random() * 2 + 1;
                    
                    particles.push({
                        x: x,
                        y: y,
                        radius: Math.random() * 4 + 2,
                        color: `hsl(${Math.random() * 60}, 100%, 50%)`,
                        vx: Math.cos(angle) * speed,
                        vy: Math.sin(angle) * speed,
                        life: Math.random() * 20 + 10
                    });
                }
                
                this.explosions.push({
                    particles: particles,
                    alpha: 1
                });
            }
            
            // 更新爆炸效果
            updateExplosions() {
                for (let i = this.explosions.length - 1; i >= 0; i--) {
                    const explosion = this.explosions[i];
                    let activeParticles = false;
                    
                    for (let j = explosion.particles.length - 1; j >= 0; j--) {
                        const particle = explosion.particles[j];
                        particle.x += particle.vx;
                        particle.y += particle.vy;
                        particle.life--;
                        
                        if (particle.life <= 0) {
                            explosion.particles.splice(j, 1);
                        } else {
                            activeParticles = true;
                        }
                    }
                    
                    // 减少爆炸的整体透明度
                    explosion.alpha -= 0.05;
                    
                    if (!activeParticles || explosion.alpha <= 0) {
                        this.explosions.splice(i, 1);
                    }
                }
            }
            
            // 绘制背景
            drawBackground() {
                // 天空渐变
                const skyGradient = this.ctx.createLinearGradient(0, 0, 0, this.canvas.height * 2/3);
                skyGradient.addColorStop(0, '#87CEEB');
                skyGradient.addColorStop(1, '#B0E2FF');
                this.ctx.fillStyle = skyGradient;
                this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
                
                // 草地
                const grassGradient = this.ctx.createLinearGradient(0, this.canvas.height * 2/3, 0, this.canvas.height);
                grassGradient.addColorStop(0, '#7CB342');
                grassGradient.addColorStop(1, '#558B2F');
                this.ctx.fillStyle = grassGradient;
                this.ctx.fillRect(0, this.canvas.height * 2/3, this.canvas.width, this.canvas.height / 3);
                
                // 土壤块
                for (const patch of this.soilPatches) {
                    const soilGradient = this.ctx.createLinearGradient(0, patch.y, 0, patch.y + patch.height);
                    soilGradient.addColorStop(0, '#8D6E63');
                    soilGradient.addColorStop(1, '#6D4C41');
                    this.ctx.fillStyle = soilGradient;
                    this.ctx.fillRect(patch.x, patch.y, patch.width, patch.height);
                    
                    // 土壤纹理
                    this.ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
                    for (let i = 0; i < 5; i++) {
                        const w = patch.width * 0.8;
                        const h = 3;
                        const x = patch.x + patch.width * 0.1 + Math.random() * patch.width * 0.2;
                        const y = patch.y + patch.height * 0.2 + i * patch.height * 0.15;
                        this.ctx.fillRect(x, y, w, h);
                    }
                }
            }
            
            // 绘制向日葵
            drawSunflowers() {
                for (const sunflower of this.sunflowers) {
                    this.ctx.save();
                    this.ctx.translate(sunflower.x + sunflower.width / 2, sunflower.y + sunflower.height / 2);
                    this.ctx.scale(sunflower.pulseSize, sunflower.pulseSize);
                    this.ctx.translate(-(sunflower.x + sunflower.width / 2), -(sunflower.y + sunflower.height / 2));
                    
                    // 花茎
                    this.ctx.fillStyle = '#4CAF50';
                    this.ctx.fillRect(
                        sunflower.x + sunflower.width / 2 - 3, 
                        sunflower.y + sunflower.height / 2, 
                        6, 
                        sunflower.height / 2
                    );
                    
                    // 花瓣
                    this.ctx.fillStyle = sunflower.color;
                    const centerX = sunflower.x + sunflower.width / 2;
                    const centerY = sunflower.y + sunflower.height / 2;
                    
                    for (let i = 0; i < 12; i++) {
                        const angle = (i / 12) * Math.PI * 2;
                        const petalX = centerX + Math.cos(angle) * 15;
                        const petalY = centerY + Math.sin(angle) * 15;
                        
                        this.ctx.beginPath();
                        this.ctx.ellipse(petalX, petalY, 8, 12, angle, 0, Math.PI * 2);
                        this.ctx.fill();
                    }
                    
                    // 花盘
                    this.ctx.fillStyle = '#FFA000';
                    this.ctx.beginPath();
                    this.ctx.arc(centerX, centerY, 10, 0, Math.PI * 2);
                    this.ctx.fill();
                    
                    // 花籽
                    this.ctx.fillStyle = '#8D6E63';
                    for (let i = 0; i < 8; i++) {
                        const angle = (i / 8) * Math.PI * 2;
                        const seedX = centerX + Math.cos(angle) * 5;
                        const seedY = centerY + Math.sin(angle) * 5;
                        
                        this.ctx.beginPath();
                        this.ctx.arc(seedX, seedY, 2, 0, Math.PI * 2);
                        this.ctx.fill();
                    }
                    
                    this.ctx.restore();
                }
            }
            
            // 绘制豌豆射手
            drawPeashooter() {
                const p = this.peashooter;
                
                // 花盆
                this.ctx.fillStyle = '#8D6E63';
                this.ctx.fillRect(p.x - 10, p.y + p.height - 10, p.width + 20, 20);
                this.ctx.fillStyle = '#6D4C41';
                this.ctx.fillRect(p.x - 5, p.y + p.height - 5, p.width + 10, 10);
                
                // 射手身体
                this.ctx.fillStyle = p.color;
                this.ctx.beginPath();
                this.ctx.ellipse(
                    p.x + p.width / 2, 
                    p.y + p.height / 2, 
                    p.width / 2, 
                    p.height / 2, 
                    0, 
                    0, 
                    Math.PI * 2
                );
                this.ctx.fill();
                
                // 射手眼睛
                this.ctx.fillStyle = 'white';
                this.ctx.beginPath();
                this.ctx.ellipse(
                    p.x + p.width * 0.6, 
                    p.y + p.height / 3, 
                    6, 
                    6, 
                    0, 
                    0, 
                    Math.PI * 2
                );
                this.ctx.fill();
                
                this.ctx.fillStyle = 'black';
                this.ctx.beginPath();
                this.ctx.ellipse(
                    p.x + p.width * 0.65, 
                    p.y + p.height / 3, 
                    3, 
                    3, 
                    0, 
                    0, 
                    Math.PI * 2
                );
                this.ctx.fill();
                
                // 射手嘴（炮管）
                this.ctx.fillStyle = '#7CB342';
                this.ctx.fillRect(
                    p.x + p.width - 5, 
                    p.y + p.height / 2 - 5, 
                    20, 
                    10
                );
                
                // 叶子
                this.ctx.fillStyle = '#4CAF50';
                this.ctx.beginPath();
                this.ctx.ellipse(
                    p.x - 10, 
                    p.y + p.height / 4, 
                    15, 
                    10, 
                    -Math.PI / 4, 
                    0, 
                    Math.PI * 2
                );
                this.ctx.fill();
                
                this.ctx.beginPath();
                this.ctx.ellipse(
                    p.x - 5, 
                    p.y + p.height * 3/4, 
                    15, 
                    10, 
                    Math.PI / 4, 
                    0, 
                    Math.PI * 2
                );
                this.ctx.fill();
            }
            
            // 绘制豌豆
            drawPeas() {
                for (const pea of this.peas) {
                    // 绘制轨迹
                    for (let i = 0; i < pea.trail.length; i++) {
                        const trailPoint = pea.trail[i];
                        const opacity = 1 - (i / pea.trail.length);
                        
                        this.ctx.fillStyle = `rgba(139, 195, 74, ${opacity * 0.5})`;
                        this.ctx.beginPath();
                        this.ctx.arc(trailPoint.x, trailPoint.y, pea.width / 2, 0, Math.PI * 2);
                        this.ctx.fill();
                    }
                    
                    // 绘制豌豆
                    this.ctx.fillStyle = pea.color;
                    this.ctx.beginPath();
                    this.ctx.arc(pea.x + pea.width / 2, pea.y + pea.height / 2, pea.width / 2, 0, Math.PI * 2);
                    this.ctx.fill();
                    
                    // 高光
                    this.ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
                    this.ctx.beginPath();
                    this.ctx.arc(
                        pea.x + pea.width / 3, 
                        pea.y + pea.height / 3, 
                        pea.width / 6, 
                        0, 
                        Math.PI * 2
                    );
                    this.ctx.fill();
                    
                    // 显示按键提示（对于慢速移动的豌豆）
                    if (pea.x < this.canvas.width * 0.7) {
                        this.ctx.fillStyle = 'black';
                        this.ctx.font = '10px "Comic Sans MS"';
                        this.ctx.textAlign = 'center';
                        this.ctx.textBaseline = 'middle';
                        this.ctx.fillText(
                            pea.key, 
                            pea.x + pea.width / 2, 
                            pea.y - 10
                        );
                    }
                }
            }
            
            // 绘制僵尸
            drawZombies() {
                for (const zombie of this.zombies) {
                    this.ctx.save();
                    this.ctx.translate(zombie.x + zombie.width / 2, zombie.y + zombie.height / 2);
                    
                    // 行走动画
                    const walkOffset = Math.sin(zombie.walkCycle) * 3;
                    this.ctx.translate(0, walkOffset);
                    
                    this.ctx.translate(-(zombie.x + zombie.width / 2), -(zombie.y + zombie.height / 2));
                    
                    // 僵尸身体
                    this.ctx.fillStyle = zombie.color;
                    this.ctx.fillRect(zombie.x, zombie.y, zombie.width, zombie.height);
                    
                    // 僵尸头部
                    this.ctx.fillStyle = '#F5F5F5';
                    this.ctx.beginPath();
                    this.ctx.arc(
                        zombie.x + zombie.width / 2, 
                        zombie.y - 15, 
                        15, 
                        0, 
                        Math.PI * 2
                    );
                    this.ctx.fill();
                    
                    // 眼睛
                    this.ctx.fillStyle = 'black';
                    this.ctx.beginPath();
                    this.ctx.arc(
                        zombie.x + zombie.width / 2 - 5, 
                        zombie.y - 18, 
                        3, 
                        0, 
                        Math.PI * 2
                    );
                    this.ctx.arc(
                        zombie.x + zombie.width / 2 + 5, 
                        zombie.y - 18, 
                        3, 
                        0, 
                        Math.PI * 2
                    );
                    this.ctx.fill();
                    
                    // 嘴巴
                    this.ctx.strokeStyle = 'black';
                    this.ctx.lineWidth = 2;
                    this.ctx.beginPath();
                    this.ctx.arc(
                        zombie.x + zombie.width / 2, 
                        zombie.y - 10, 
                        5, 
                        0, 
                        Math.PI
                    );
                    this.ctx.stroke();
                    
                    // 显示需要按下的按键
                    this.ctx.fillStyle = 'yellow';
                    this.ctx.font = 'bold 14px "Comic Sans MS"';
                    this.ctx.textAlign = 'center';
                    this.ctx.textBaseline = 'middle';
                    this.ctx.fillText(
                        zombie.key, 
                        zombie.x + zombie.width / 2, 
                        zombie.y + zombie.height / 2
                    );
                    
                    // 生命值显示（重型僵尸）
                    if (zombie.type === 'heavy' && zombie.health > 1) {
                        this.ctx.fillStyle = '#333';
                        this.ctx.fillRect(zombie.x, zombie.y - 30, zombie.width, 5);
                        
                        this.ctx.fillStyle = 'red';
                        const healthWidth = (zombie.health / 3) * zombie.width;
                        this.ctx.fillRect(zombie.x, zombie.y - 30, healthWidth, 5);
                    }
                    
                    this.ctx.restore();
                }
            }
            
            // 绘制爆炸效果
            drawExplosions() {
                for (const explosion of this.explosions) {
                    for (const particle of explosion.particles) {
                        this.ctx.globalAlpha = explosion.alpha * (particle.life / 30);
                        this.ctx.fillStyle = particle.color;
                        this.ctx.beginPath();
                        this.ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
                        this.ctx.fill();
                    }
                    this.ctx.globalAlpha = 1;
                }
            }
            
            // 绘制游戏
            draw() {
                // 清空画布
                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
                
                // 绘制背景
                this.drawBackground();
                
                // 绘制向日葵
                this.drawSunflowers();
                
                // 绘制游戏元素
                this.drawPeas();
                this.drawZombies();
                this.drawExplosions();
                this.drawPeashooter();
            }
            
            // 游戏循环
            gameLoop(timestamp) {
                // 计算时间差
                const deltaTime = timestamp - this.lastTime;
                this.lastTime = timestamp;
                
                // 只有在游戏进行中才更新
                if (this.gameState === 'playing') {
                    this.updateSunflowers();
                    this.updatePeas();
                    this.spawnZombie();
                    this.updateZombies();
                    this.updateExplosions();
                    this.checkCollisions();
                }
                
                // 绘制游戏
                this.draw();
                
                // 继续循环
                requestAnimationFrame((timestamp) => this.gameLoop(timestamp));
            }
        }
        
        // 当页面加载完成后初始化游戏
        window.addEventListener('load', () => {
            console.log(123)
            new PlantsVsZombies();
        });
    </script>
</body>
</html>
